<template>
	<view class="page">
		<view class="title">
			为了更好的为您服务，请您务必填写真实信息
		</view>
		<u-form-item borderBottom v-if="reject_msg">
			<template #label class="title">
				<span style="color: red;">*</span>
				<span style="margin-right: 20rpx;font-weight: bold;">驳回原因:</span>
			</template>
			<u--input v-model="reject_msg" readOnly="readOnly" border="none" placeholder="请输入详细地址"></u--input>
		</u-form-item>
		<view class="form">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">

				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">头像:</span>
					</template>

				</u-form-item>
				<u-form-item borderBottom>
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="1" :previewFullImage="true"></u-upload>
				</u-form-item>
				<u-form-item borderBottom prop="userInfo.phone">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">联系电话:</span>
					</template>
					<u-input v-model="model1.userInfo.phone" border="none" placeholder="请输入电话"></u-input>
				</u-form-item>
				<u-form-item borderBottom ref="item1" @click="picker">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">省市区:</span>
					</template>
					<view>
						<text v-if="isAddress">选择省市区</text>
					</view>
					<text>{{str}} </text>

				</u-form-item>
				<!-- <u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">验证码:</span>
					</template>
					<u-input v-model="leasingManager.code" border="none" placeholder="请输入验证码"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<u-button @tap="getCode" size="mine">{{tips}}</u-button>
				</u-form-item> -->
				<u-form-item borderBottom prop="userInfo.address">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;" @click="getAddress">详细地址:</span>
					</template>
					<u-input v-model="model1.userInfo.address" border="none" placeholder="请输入详细地址"></u-input>

				</u-form-item>

				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="font-weight: bold;">个人介绍:</span>
					</template>
				</u-form-item>
				<uni-forms-item borderBottom prop="userInfo.trduction">
					<u--textarea v-model="value1" placeholder="请输入个人介绍" height="80" maxlength="150" count="true"
						border="bottom"></u--textarea>
				</uni-forms-item>
				<u-form-item borderBottom prop="userInfo.name">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">姓名:</span>
					</template>
					<u-input v-model="model1.userInfo.name" border="none" placeholder="请输入姓名"></u-input>
				</u-form-item>
				<u-form-item borderBottom prop="userInfo.cardNumber">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">身份证号码:</span>
					</template>
					<u-input v-model="model1.userInfo.cardNumber" border="none" placeholder="请输入身份证号码"></u-input>
				</u-form-item>
				<u-form-item borderBottom @click="show1=true">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">擅长领域:</span>
					</template>
					<u-input disabled placeholder="请选择擅长领域" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<view class="title1" style="display: flex;">
						<!-- Show selected title -->
						<view class="title2" v-for="el in categoryList" :key="el.id">
							<text>{{el.name}}</text>
						</view>

					</view>
				</u-form-item>

				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">奖项照片（最多上传6张）:</span>
					</template>

				</u-form-item>
				<u-form-item borderBottom>
					<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
						:maxCount="10" :previewFullImage="true"></u-upload>
				</u-form-item>


				<u-form-item borderBottom @click="show3=true" v-if="!model1.userInfo.investmentManager['ishide']">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">招商经理:</span>
					</template>
					<u-input v-model="model1.userInfo.investmentManager.attract_name" disabled placeholder="请选择招商经理"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">入驻费:</span>
					</template>
					<u-input v-model="entry_fee" border="none" placeholder="">元</u-input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">签名:</span>
					</template>
				</u-form-item>

				<u-form-item borderBottom>
					<image :src="isSelfImg" @click="showSelf=true" mode="widthFix" style="width: 250px;height: 150px;">
					</image>
				</u-form-item>

			</u--form>

		</view>
		<u-picker :keyName="'attract_name'" :show="show3" :columns="marketData" @close="show3=false"
			@confirm="confirmzs"></u-picker>

		<u-picker :show="show" :columns="collectionLists" @close="close" @confirm="confirm"></u-picker>
		<u-popup :show="show1" mode="center" :round="10" @close="close1" @open="open">
			<view class="popup">
				<view class="title3">
					擅长领域
				</view>
				<view class="content">
					<u-checkbox-group placement="column" @change="checkboxChange">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :name="item.id">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="button">
					<view class="button1" @click="clear">
						全部清除
					</view>
					<view class="button2" @click="close1">
						提交
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show2" round="10" mode="center" @close="show2=false" @open="open">
			<view style="margin: 20rpx;">
				<view class="title1" style="text-align: center;">
					{{title}}入驻协议
				</view>
				<scroll-view style="height: 300px;" scroll-y="true" class="scroll-Y">
					<view v-html="textConten"> </view>
				</scroll-view>
			</view>
		</u-popup>
		<view class="container" v-if="status!=1">

			<view class="item">
				<u-checkbox-group @change="changeFn">
					<u-checkbox></u-checkbox>
				</u-checkbox-group>
				<view>
					我已阅读
					<text class="text1" @click="show2=true">《{{title}}入驻协议》</text>，
					并已签署
					<text class="text1" @click="hetong">《{{title}}入驻合同》</text>
				</view>
			</view>
			<view class="custom-button" @tap="submit">提交</view>


		</view>

		<u-popup :show="showSelf" round="10" mode="center" @close="showSelf=false">
			<view style="margin: 20rpx;">
				<SignaturePad @getImg="getImgFn" />
			</view>
		</u-popup>

	</view>






</template>

<script>
	import SignaturePad from './../canvas.vue';
	import {
		getCategoryList,
		getAgreementData,
		uploadImg,
		getEntryFee,
		getAttractList,
		getUserPainter,
		delNameById,
		storePainter,
	} from '@/config/api.js';
	export default {
		components: {
			SignaturePad,
		},
		data() {
			return {
				isAddress: true,
				str: '',
				showSelf: false,
				show2: false,
				show1: false,
				show: false,
				value1: '',
				value2: '',
				tips: '获取验证码',
				show: false,

				paramName: '',
				paramContent: '', // 用于存储输入的参数名
				selectedLabel: '',
				//规格属性
				count: '',
				price: '',
				color: '',
				fileList2: [],
				checkboxValue1: [],
				categoryList: [],
				selectedFields: '',
				selectedValues: [],
				fileList3: [],
				fileList4: [],
				showFree: false,
				fileList1: [],
				collectionLists: [
					['张三', '李四']
				],

				// 基本案列数据
				checkboxList1: [{
						name: '书画',
						id: 1,
						disabled: false
					},
					{
						name: '字画',
						id: 2,
						disabled: false
					},
					{
						name: '古币',
						id: 3,
						disabled: false
					}
				],
				selectedTitles: [],
				model1: {
					userInfo: {
						name: '',
						phone: '',
						time: '',
						free: '',
						code: '',
						address: '内蒙古自治区赤峰市松山区契丹古玩城',
						collection: '',
						bank: '',
						bankNumber: '',
						price: '5000元',
						excel: '',
						cardNumber: '',
						investmentManager: '',
					},
				},
				isSelfImg: null,
				rules: {
					'userInfo.socialCode': {
						type: 'string',
						required: true,
						message: '社会统一信用代码',
						trigger: ['blur', 'change']
					},
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},

					'userInfo.cardNumber': {
						type: 'number',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					},



					'userInfo.address': {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},

					'userInfo.phone': {
						type: 'number',
						required: true,
						message: '请填写联系电话',
						trigger: ['blur', 'change']
					},
					'userInfo.firm': {
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					},
					'userInfo.trduction': {
						type: 'string',
						required: true,
						message: '请填写个人介绍',
						trigger: ['blur', 'change']
					}


				},
				radio: '',
				title: '',
				textConten: '',
				entry_fee: '',
				marketData: [],
				status: null,

				latitude_wx: 42.265807,
				longitude_wx: 118.959592,
				show3: false,
				reject_msg: '',
				switchVal: false
			};
		},
		onLoad(options) {
			// 获取传递过来的标题
			const title = decodeURIComponent(options.title);
			this.title = title;
			if (options.zhaoshang_id) {
				this.model1.userInfo.investmentManager = {
					id: options.zhaoshang_id,
					user_id: options.zhaoshang_id,
					ishide: true
				}
			}
			// 可以将 title 设置为页面的标题或在页面中使用
			wx.setNavigationBarTitle({
				title: title
			});

			getEntryFee({
				id: 9
			}).then(res => {
				this.entry_fee = res.entry_fee;
			})

			getAgreementData({
				id: 16
			}).then(res => {
				this.textConten = res;
			})
			getCategoryList({
				nav_id: 9,
			}).then(res => {
				this.checkboxList1 = res;
				getAttractList().then(res => {
					this.marketData = [res];
					getUserPainter().then(res => {
						if (!res.id) return;
						const data = res;

						this.id = data.id;

						this.fileList3 = [{
							url: data.avatar_img
						}]
						this.model1.userInfo.phone = data.phone;
						this.model1.userInfo.ame = data.store_name;
						this.model1.userInfo.address = data.address;
						this.model1.userInfo.cardNumber = data.number_ID;
						this.value1 = data.introduce;
						this.latitude_wx = data.latitude_wx;
						this.longitude_wx = data.longitude_wx;
						this.isSelfImg = data.card_top;
						this.status = data.status;
						this.reject_msg = data.reject_msg;
						this.marketData[0].forEach(el => {
							if (el.user_id == data.zhaoshang_id) this.model1.userInfo
								.investmentManager = el;
						});
						data.img_list.split(',').forEach(el => {
							this.fileList4.push({
								url: el
							})
						});
						const typelist = [];
						data.category_id.split(',').forEach(el => {
							typelist.push(el - 0)
						})
						this.checkboxList1.forEach(el => {
							if (typelist.includes(el.id)) this.categoryList.push(el);
						});

					})
				})
			});


		},
		methods: {
			picker() {
				this.isAddress = false;
				const _this = this;
				uni.getLocation({
					type: 'wgs84',
					// 返回可以用于uni.openLocation的经纬度
					success: function success(res) {
						console.log('经度: ' + res.latitude);
						console.log('纬度: ' + res.longitude);
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success: function(res) {
								console.log(res)
								_this.str = res.address
								_this.value.address = res.address
								_this.value.latitude_wx = res.latitude
								_this.value.longitude_wx = res.longitude
							},
							fail: function(err) {
								console.error('选择地点失败:', err);
							}
						})
					},

					fail: function fail(err) {
						console.error('获取位置失败:', err);
					}
				});

			},

			async getImgFn(url) {

				const result = await this.uploadFilePromise(url)
				this.isSelfImg = result;
				this.showSelf = false;
			},
			changeFn(e) {
				this.isAgreed = !!e.length;

			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					if (this.isAgreed) {
						// 提交逻辑
						// console.log('协议已阅读，提交成功');
						if (!this.isSelfImg) {
							this.showSelf = true;
							return;
						}
						if (!this.fileList3[0] || !this.fileList3[0].url) {
							uni.$u.toast('未上传头像');
							return;
						}
						const sendata = {
							avatar_img: this.fileList3[0]['url'],
							phone: this.model1.userInfo.phone,
							address: `${this.str} ${this.model1.userInfo.address}`,
							introduce: this.value1,
							number_ID: this.model1.userInfo.cardNumber,
							store_name: this.model1.userInfo.name,
							latitude_wx: this.latitude_wx,
							longitude_wx: this.longitude_wx,
							zhaoshang_id: this.model1.userInfo.investmentManager.user_id,
							card_top: this.isSelfImg
						}
						const imgList = [],
							category = [];
						this.categoryList.forEach(el => {
							category.push(el.id)
						})
						this.fileList4.forEach(el => {
							imgList.push(el.url)
						});
						// sendReqData['img_list'] = this.fileList3[0]['url'];
						sendata['img_list'] = imgList.join();
						sendata['category_id'] = category.join();
						if (this.id) {
							sendata['status'] = 2;
							sendata['id'] = this.id;
						}

						console.log(sendata, '--------')
						storePainter(sendata).then(data => {
							if(data.signType){
								wx.requestPayment({
								  timeStamp: data.timeStamp,
								  nonceStr: data.nonceStr,
								  package: data.package,
								  signType: data.signType,
								  paySign: data.paySign,
								  success (res) { 
									  console.log(res,'=============')
									  uni.$u.toast('审核中...')
								  },
								  fail (res) { 
									  // 支付失败 删除商品
									  delNameById({'sql_name': data._sql_name,idx: data._idx,order_sn: data._order_sn})
								  }
								})
							}else{
								uni.$u.toast('审核中...')
							}
						})
						// this.$refs.uToast.show('提交成功');
					} else {
						// 提示用户需阅读协议
						// this.$refs.uToast.show();
						uni.$u.toast('请先阅读协议')
					}

				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
				// if(!this.bank_id)return uni.$u.toast('请先绑定银行卡');

			},
			getAddress() {
				const _this = this;
				uni.getLocation({
					type: 'wgs84',
					// 返回可以用于uni.openLocation的经纬度
					success: function success(res) {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success: function(res) {
								_this.model1.userInfo.address = res.address
								_this.latitude_wx = res.latitude
								_this.longitude_wx = res.longitude
							},
							fail: function(err) {
								console.error('选择地点失败:', err);
							}
						})
					},

					fail: function fail(err) {
						console.error('获取位置失败:', err);
					}
				});
			},
			confirmzs(selectedItems) {
				this.model1.userInfo.investmentManager = selectedItems.value[0]; // 更新输入框的值为选中的商品类目
				this.show3 = false; // 关闭选择器
			},
			hetong() {
				uni.navigateTo({
					url: '/moduleA/MerchantIn/contract?id=9',
				});
			},
			//上传身份证
			afterRead(file) {
				this.fileList6.push(file);
				// 处理上传逻辑
			},
			deletePic(index) {
				this.fileList6.splice(index, 1);
			},

			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				this.$refs.uForm.setRules(this.rules)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uploadImg({
						url: url,
						fileName: 'painter'
					}).then(res => {
						resolve(res)
					})
				})
			},
			//获取验证码
			getCode() {
				// 获取验证码的逻辑
				console.log('获取验证码');
			},
			end() {
				// 结束倒计时的逻辑
				console.log('倒计时结束');
			},
			start() {
				// 开始倒计时的逻辑
				console.log('倒计时开始');
			},
			codeChange() {
				// 处理验证码变化的逻辑
				console.log('验证码变化');
			},
			//选择招商经理
			close() {
				this.show = false; // 关闭选择器
			},
			confirm(selectedItems) {

				this.model1.userInfo.investmentManager = selectedItems.value; // 更新输入框的值为选中的商品类目

				this.show = false; // 关闭选择器
			},
			//擅长领域
			checkboxChange(n) {
				this.checkboxValue1 = [];
				let list = [];
				n.forEach(el => {
					this.checkboxList1.forEach(ele => {
						if (ele.id == el) list.push(ele);
					})
				});
				this.categoryList = list;

			},

			open() {
				// console.log('open');
			},
			close1() {
				this.show1 = false;
				// console.log('close');
			},
			clear() {
				this.checkboxValue1 = [];
				this.selectedTitles = []; // Clear selected titles
				this.show1 = false;
			}

		}
	}
</script>

<style scoped lang="scss">
	// @import 'settledTable.scss';

	.form {

		padding: 0 20rpx;

	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		background-color: #ffebeb;
		color: red;
		padding: 0 20rpx;
	}



	.custom-button {
		background-color: #d1a969;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;

		border-radius: 40rpx;
		margin: 20rpx;
	}

	.popup-content .item1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
	}

	.popup-content .title {
		margin-top: 20rpx;
		text-align: center;
	}

	.popup-content .button-group {
		display: flex;
		margin-top: 30rpx;
	}

	.popup-content .button-group .item {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		border-radius: 40rpx;
		background-color: $base;
		margin: 0 40rpx;
	}

	.identityCard {
		display: flex;
		justify-content: space-between;
		width: 100%;

	}

	.container {
		margin-top: auto;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.text1 {
		color: #d1a969;
	}

	.identityCard {
		display: flex;
		justify-content: space-between;
		width: 100%;

	}

	.image1 {}

	.container .custom-button {
		width: 96%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #d1a969;
		/* 设置按钮的背景颜色 */
		color: #fff;
		border-radius: 50rpx;
	}

	//擅长领域
	.title2 {
		margin: 10rpx 0;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		line-height: 30rpx;
		color: #d1a969;
		height: 50rpx;
		border-radius: 20rpx;
		border: 1rpx solid #d1a969;
	}

	.popup {
		width: 600rpx;

		.title3 {
			text-align: center;
			padding: 20rpx 0;
			border: 1rpx solid #c0c0c0;
		}

		.content {
			padding: 20rpx 150rpx;
		}

		.button {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			border-top: 1rpx solid #c0c0c0;

			.button1 {
				color: #c0c0c0;
			}

			.button2 {
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #d1a969;
				color: #fff;
				border-radius: 30rpx;
				text-align: center;
			}
		}


	}
</style>